<template>
    <div>
    <div class="recommend-title" id="jindian">周末去哪儿</div>
    
    <ul>
        <li class="item border-bottom" v-for="item of list" :key="item.id">
               <div class="item-img-wrapper">
                <img class="item-img" :src="item.imgUrl">
               </div>

              <div class="item-info">
              <p class="item-title">{{item.title}}</p>
              <p class="item-desc">{{item.desc}}</p>
             </div>

        </li>
        <div class="item-more">
                查看更多
       </div>
    </ul>

</div>
</template>
<script>
    export default {
       name: 'HomeWeekend',
       props: {
        list: Array
       }
  
    
    }
</script>
<style lang="stylus" scoped>
    @import  '~styles/mixins.styl'
     .recommend-title {
        line-height: .8rem;
        background: #eee;
        text-indent: .2rem;
        font-weight: 700;
        font-size: .3rem;
     }
    
     .item-img-wrapper {
        overflow: hidden;
        height: 0;
        padding-bottom: 37.09%;
     }


    .item-img {
       width: 100%;
    }

    .item-info {
        padding: .1rem;
        margin-bottom: .4rem;
    }
    
    .item-title {
        line-height: .54rem;
        font-size: .32rem;
        text-align: center;
        ellipsis();
    }

    .item-desc {
        line-height: .4rem;
        color: #787878;
        ellipsis();
        text-align: center;
    }
 
   .item-price {
    line-height: .60rem;
    color: red;
    font-size: .38rem;

   }

   .item-price .qi {
    color: #cc1;
    font-size: .28rem;
    margin-left: .1rem;
   }
    
 .item-price-right {
    float: right;
    font-size: .22rem;
    margin: .6rem .2rem 0 0; 
    ellipsis();
    color: #8B8B83;

 }
 
   .item-more {
      background:#eee;
      height: .8rem;
      line-height: .8rem;
      font-weight: 700;
      text-align: center;
      font-size: .3.5rem;
      color: #6959CD;
   }

   

</style>